<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品管理</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <style>
        body {
            background-color: #f8f9fa;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .container {
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            padding: 30px;
            margin-top: 50px;
        }
        h1, h2 {
            color: #343a40;
        }
        form {
            margin-bottom: 30px;
        }
        .form-control {
            margin-bottom: 15px;
        }
        table {
            width: 100%;
            margin-bottom: 1rem;
            color: #212529;
        }
        th, td {
            text-align: center;
        }
        .btn {
            margin: 0 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="text-center">商品管理</h1>

        <h2>添加商品</h2>
        <form id="addProductForm" class="form-group">
            <input type="text" id="name" class="form-control" placeholder="商品名称" required>
            <input type="number" id="price" class="form-control" placeholder="商品价格" required>
            <input type="text" id="image" class="form-control" placeholder="商品图片URL" required>
            <button type="submit" class="btn btn-primary">添加商品</button>
        </form>

        <h2>商品列表</h2>
        <table id="productList" class="table table-bordered table-striped">
            <thead class="thead-dark">
                <tr>
                    <th>商品名称</th>
                    <th>价格</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <!-- 商品列表会在这里显示 -->
            </tbody>
        </table>

        <div class="card">
            <div class="card-body text-center">
                <a href="/stats" class="btn btn-success">统计</a>
            </div>
        </div>
    </div>

    <!-- 引入 jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
        // 获取商品并显示
        function loadProducts() {
            $.get('/api/products', function(products) {
                let tbody = $('#productList tbody');
                tbody.empty(); // 清空表格
                products.forEach(function(product) {
                    tbody.append(`
                        <tr>
                            <td>${product.name}</td>
                            <td>${product.price}</td>
                            <td>
                                <button onclick="editProduct(${product.id})" class="btn btn-warning">编辑</button>
                                <button onclick="deleteProduct(${product.id})" class="btn btn-danger">删除</button>
                            </td>
                        </tr>
                    `);
                });
            });
        }

        // 添加商品
        $('#addProductForm').on('submit', function(e) {
            e.preventDefault();

            const productData = {
                name: $('#name').val(),
                price: parseFloat($('#price').val()),
                image: $('#image').val()
            };

            $.ajax({
                url: '/api/products',
                method: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(productData),
                success: function() {
                    loadProducts(); // 刷新商品列表
                    $('#addProductForm')[0].reset(); // 清空表单
                },
                error: function(error) {
                    alert('添加商品失败: ' + error.responseJSON.error);
                }
            });
        });

        // 编辑商品
        function editProduct(id) {
            const newName = prompt('输入新的商品名称:');
            const newPrice = prompt('输入新的商品价格:');

            if (newName && newPrice) {
                $.ajax({
                    url: '/api/products/' + id,
                    method: 'PUT',
                    contentType: 'application/json',
                    data: JSON.stringify({
                        name: newName,
                        price: parseFloat(newPrice)
                    }),
                    success: function() {
                        loadProducts(); // 刷新商品列表
                    },
                    error: function(error) {
                        alert('更新商品失败: ' + error.responseJSON.error);
                    }
                });
            }
        }

        // 删除商品
        function deleteProduct(id) {
            if (confirm('确定要删除此商品吗？')) {
                $.ajax({
                    url: '/api/products/' + id,
                    method: 'DELETE',
                    success: function() {
                        loadProducts(); // 刷新商品列表
                    },
                    error: function(error) {
                        alert('删除商品失败: ' + error.responseJSON.error);
                    }
                });
            }
        }

        // 初始化页面
        $(document).ready(function() {
            loadProducts(); // 加载商品列表
        });
    </script>
</body>
</html>
    